import React, { Component } from "react";
import { Form, Icon, Input, Button, Message } from "antd";
import { Link, Redirect } from "react-router-dom";
import "./login.less";
import { reqLogin } from "../../api/index";

import memory from "../../utils/memory";
import storageUtils from "../../utils/storageUtils";

const Item = Form.Item;

class Login extends Component {
  handleSubmit = e => {
    e.preventDefault();
    const form = this.props.form;
    form.validateFields((err, values) => {
      if (!err) {
        console.log("提交登陆的ajax请求");
        console.log(values);
        const { usename, password } = values;
        // const user = '陈浩';
        memory.user = usename; //保存在内存中
        storageUtils.saveUser(usename); //保存到local中
        this.props.history.replace("/admin");

        //const response = await reqLogin(usename, password);
        // const result = response.data;
        // if (result.status === 0) {
        // Message.success("登录成功");
        // this.props.history.replace("/");
        // } else {
        // Message.error(result.msg);
        // }
      } else {
        console.log("检验失败");
      }
    });
    // const values = form.getFieldsValue();
    // console.log(values);
    // console.log(values.usename);
  };
  //   自定义验证
  validatePwd = (rule, value, callback) => {
    if (!value) {
      callback("密码必须输入");
    } else if (value.length < 4) {
      callback("密码长度不能小于4");
    } else if (value.length > 12) {
      callback("密码长度不能大于12");
    } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
      callback("密码必须是英文、数字和下划线");
    } else {
      callback();
    }
  };

  render() {
    //   得到强大的form对象
    const form = this.props.form;
    console.log(form);
    const { getFieldDecorator } = this.props.form;
    const user = memory.user;
    console.log(user); //{}
    console.log(!user); //false
    if (typeof user !== "object") {
      console.log("user/////");
      return <Redirect to="/" />;
    }

    return (
      <div style={{ height: "100%" }}>
        {/* 上部分 */}
        <div className="login">
          {/* 头部 */}
          <header className="login-header"></header>
          {/* 登录表单 */}
          <section className="login-content">
            <div className="have-account">
              没有账号? <span>立即注册></span>
            </div>
            <h2>天择快销品后台登录</h2>
            <Form onSubmit={this.handleSubmit} className="login-form">
              <Item>
                {getFieldDecorator("usename", {
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      message: "用户名必须输入"
                    },
                    {
                      min: 4,
                      message: "用户名至少4位"
                    },
                    {
                      max: 12,
                      message: "用户名最多12位"
                    },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: "不能有下划线" }
                  ]
                })(
                  <Input
                    style={{ marginBottom: 0 }}
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="请输入账号"
                  />
                )}
              </Item>
              <Item>
                {getFieldDecorator("password", {
                  rules: [{ validator: this.validatePwd }]
                })(
                  <Input
                    style={{ marginBottom: 0 }}
                    prefix={
                      <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    type="password"
                    placeholder="请输入密码"
                  />
                )}
              </Item>
              <Link to="/loginSet" className="forgot-password">
                忘记密码？
              </Link>

              <Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  登 录
                </Button>
              </Item>
            </Form>
          </section>
        </div>
        {/* 底部 */}
        <div className="login-bottom">
          <div className="tip">
            <div>
              Copyright © 2003-2103 ComCdn.com. All Rights Reserved.
              天择信上集团
              版权所有　杭州天择网络技术有限公司　粤ICP备05020607号-7
            </div>
            <div>
              《中华人民共和国增值电信业务经营许可证》粤B1.B2-20070191
              网站备案号：粤ICP备05020607号-7 粤公网安备 44030702001116
            </div>
          </div>
        </div>
      </div>
    );
  }
}
// 包装Form组件生成一个新的组件：Form(Login);
// 新组件会向Form组件传递一个强大的对象属性：form
const WrapLogin = Form.create()(Login);
export default WrapLogin;
